<template>
	<view class="main_style">
		<input placeholder="请输入群名称" v-model="groupname" class="input_style" />
		<view class="radio">
			<u-radio-group v-model="value" @change="radioGroupChange">
				<u-radio  v-for="(item, index) in list" :key="index" :name="item.type" :disabled="item.disabled">
					{{item.name}}
				</u-radio>
			</u-radio-group>
		</view>
		<view class="bottom_upload" @click="uploadQr" >选择二维码</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				groupname: '',
				list: [{
						name: '拼多多',
						type:'pddGroup',
						disabled: false
					},
					{
						name: '外卖',
						type:'wmRedGroup',
						disabled: false
					}
				],
				value: 'pddGroup',
			}
		},
		methods: {
			
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				// if(this.value == e)return;
				console.log(e);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// if(this.value == e)return;
				// this.
				console.log(e);
				
			},
			uploadQr(){
				if(this.groupname.length == 0)return;
				if(this.value.length == 0)return;
				uni.chooseImage({
				    success: (chooseImageRes) => {
				        const tempFilePaths = chooseImageRes.tempFilePaths;
				        uni.uploadFile({
				            url: this.$config.qr_host+"/mQr/uploadQr", //仅为示例，非真实的接口地址
				            filePath: tempFilePaths[0],
				            name: 'file',
				            formData: {
				                'user': 'test'
				            },
				            success: (res) => {
								console.log(res);
								if(res.statusCode != 200) return;
								let data = JSON.parse(res.data);
				                if(data.data.url.length > 0){
									this.$request.post({
										url: "/mQr/addQr",
										data:{
											qr_url:data.data.url,
											qr_name:this.groupname,
											qr_type:this.value,
											},
										success(res) {
											uni.hideLoading();
											uni.navigateBack();
											console.log(res);
										},
										fail(failed) {
											uni.hideLoading();
										}
									});
								}
				            },
							fail:(res)=>{
								console.log(res)
							}
				        });
				    }
				});
			}
		}
	}
</script>

<style lang="stylus" scoped>
	.input_style {
		margin-top 20rpx;
		margin-left 20rpx;
		margin-right 20rpx;
		height 80rpx;
		line-height 80rpx;
		background-color: #eee;
		border-radius 40rpx;
		padding-left 20rpx;
	}

	.bottom_upload {
		position fixed;
		bottom 20rpx;
		left 20rpx;
		right 20rpx;
		height 88rpx;
		border-radius 44rpx;
		text-align center;
		line-height 88rpx;
		color #fff;
		font-weight bold;
		background: linear-gradient(51deg, #F38200, #FF0000);
	}
	
	.radio{
		padding 20rpx;
	}
</style>
